var xhr = new XMLHttpRequest();  //全局xhr对象

var server_url = "https://pcapi-xiaotuxian-front.itheima.net"  // 生产服务器

var infos = document.querySelectorAll('.iot_item_info')  // 获取商品标题对象

var prices = document.querySelectorAll('.iot_item_price')  // 获取商品价格对象

var item_imgs = document.querySelectorAll('.iot_item_img')  //获取图片对象

var node_wrap = document.querySelector('.iot_guess_like') // 获取插入节点的父元素，做容器

var banner_img = document.querySelector('#banner_img')

// 封装清洗数据的函数，只能提取出result中的数据数组，因为每个响应格式不一样
var draw_data = (res) => {
    res = JSON.parse(res)
    let datas = res.result // 提取出datas数组
    return datas.subTypes[0].goodsItems.items
}

// 封装get的ajax请求并渲染,api为字符串
var get_ajax_render = (api) => {

    xhr.addEventListener("readystatechange", function () {
        if (this.readyState === 4) {
            console.log(this.responseText)  //显示响应内容原文
            let datas = draw_data(this.responseText) //调用清洗函数，提取出data数组  
            // console.log(datas)  
            // datas = datas.items //进一步提取  
            for (let i = 0; i < datas.length; i++) {
                let entries = Object.entries(datas[i])  //解包
                let names = entries[1]
                let desc = entries[2]  // 详细描述，暂时用不上
                let price = entries[3]
                let imgs = entries[4]
                //  渲染
                infos[i].innerText = names[1]
                prices[i].innerText ="￥"+ price[1]
                item_imgs[i].src = imgs[1]
                banner_img.src = JSON.parse(this.responseText).result.bannerPicture
            }
        }
    });
    xhr.open("GET", server_url + api, true);
    // 发送请求
    xhr.send();
}

const preference_api = "/hot/inVogue"

get_ajax_render(preference_api)